<template>
  <view class="chat-list">
    <!-- 搜索框 -->
    <view class="search-bar">

      <u-search :show-action="true"
                :show-icon="true"
                shape="square"
                bg-color="white"
                v-model="keywords"
                :show-action-icon="true"
                :placeholder="'搜索备注、昵称或者聊天记录'"
                @search="search"
                @custom="search"
                @clear="search"
              />
    </view>

    <view class="no-data" v-if="chatList.length===0">
      <u-empty
        :text="'暂无聊天会话'"
      />
    </view>
    <scroll-view
      scroll-y
      style="height: 100vh;"
      @scrolltolower="loadMoreData"
      v-else
    >
      <view
        class="chat-item"
        v-for="(item, index) in chatList"
        :key="index"
        @click="gotoChat(item)"
        @longpress="showDeleteDialog(item)"
      >
        <u-avatar
          :src="item.avatar"
          size="80"
        ></u-avatar>
        <view class="content">
          <view class="top-row">
            <text class="nickname">{{item.nickname}}</text>
            <text class="time">{{item.lastTime}}</text>
          </view>
          <view class="message">
            <text class="message-text">{{item.lastMessage}}</text>
            <text v-if="item.unreadCount" class="unread-count">{{item.unreadCount}}</text>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import {conversations} from "@/pages/packageA/kefu/chat_api";
export default {
  data() {
    return {
      keywords: '',
      chatList: [],
      page: 0,
      loading: false
    }
  },
  computed: {

  },
  onPullDownRefresh() {
    this.chatList = []
    this.page = 0
    this.getChatList();
    setTimeout(()=>{
      uni.stopPullDownRefresh()
    },1000)
  },
  onShow() {
    this.page = 0
    this.getChatList()
    console.log(this.chatList)
  },
  onLoad() {

  },
  methods: {
    search: function () {
      this.chatList = [];
      this.page = 0;
      this.getChatList();
    },
    getChatList() {
      this.page++;
      conversations({
        page: this.page,
        keywords:this.keywords
      }).then(res=>{
        console.log(res)
        if (res.code ===0){
          if (this.page==1){
            this.chatList = res.data.list
          }else{
            this.chatList = this.chatList.concat(res.data.list)
          }
        }
      })
    },
    gotoChat(item) {
      uni.navigateTo({
        url: `/pages/packageA/kefu/chat?conversation_id=${item.conversation_id}`
      })
    },
    showDeleteDialog(item) {
      uni.showModal({
        title: '提示',
        content: '确定要删除该聊天吗？',
        success: (res) => {
          if (res.confirm) {
            this.deleteChat(item)
          }
        }
      })
    },
    deleteChat(item) {
      const index = this.chatList.findIndex(chat => chat.conversation_id === item.conversation_id)
      if (index > -1) {
        this.chatList.splice(index, 1)
      }
    },

    onClear() {
      this.searchQuery = '';
    },
    loadMoreData() {
      if (this.loading) return;
      console.log('加载更多数据');
      this.loading = true;
      // 模拟异步加载数据
      setTimeout(() => {
        this.getChatList()
        this.loading = false;
      }, 1000);
    }
  },
  onReachBottom() {
    console.log('触底了');
    this.loadMoreData();
  }
}
</script>

<style lang="scss">
.chat-list {
  padding: 20rpx;

  .search-bar {
    margin-bottom: 20rpx;
  }

  .chat-item {
    display: flex;
    align-items: center;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #eee;

    .content {
      flex: 1;
      margin-left: 20rpx;

      .top-row {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .nickname {
          font-size: 28rpx;
          color: #333;
          font-weight: bold;
          flex-shrink: 1;
        }

        .time {
          font-size: 24rpx;
          color: #999;
          flex-shrink: 0;
          margin-left: 10rpx;
          white-space: nowrap;
        }
      }

      .message {
        margin-top: 10rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .message-text {
          font-size: 26rpx;
          color: #666;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          flex-grow: 1;
          margin-right: 10rpx;
        }

        .unread-count {
          background-color: red;
          color: white;
          border-radius: 10rpx;
          padding: 2rpx 6rpx;
          font-size: 20rpx;
          flex-shrink: 0;
        }
      }
    }
  }
}
</style>
